<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :ok-loading="modalProps.loading"
    @before-ok="submit"
  >
    <a-form ref="formRef" :model="form">
      <a-form-item field="userName" label="用户名称">
        <a-input v-model="form.userName" placeholder="用户名称" />
      </a-form-item>
      <a-form-item field="userPw" label="登录密码">
        <a-input v-model="form.userPw" placeholder="登录密码" />
      </a-form-item>
      <a-form-item field="userRole" label="用户角色">
        <a-select v-model="form.userRole">
          <a-option v-for="role in roles" :value="role.roleId" :key="role.roleId">{{
            role.roleName
          }}</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { post, ResponseCode } from '@/api/http'
  import { ROLE_LIST } from '@/api/role/index'
  import { CREATE_USER, USER_UPDATE } from '@/api/user'
  import { useRole } from '../role.hook'
  import { Form, Message, ValidatedError } from '@arco-design/web-vue'
  import md5 from 'md5'
  import type { User } from '@/api/type'

  const emits = defineEmits<{
    doRefresh: []
  }>()

  const visible = defineModel<boolean>('visible')
  const user = defineModel<User>('user')
  const title = ref('添加用户')

  const { roles, getRoles } = useRole()

  const modalProps = reactive({
    loading: false,
  })

  const form = reactive({
    userName: '',
    userPw: '',
    userRole: '',
  })

  watch(visible, (bool) => {
    if (bool) {
      if (user.value) {
        form.userName = user.value.userName
        // form.userPw = user.value.userPw
        form.userRole = user.value.userRole
        title.value = `编辑用户:${user.value.userName}`
      }
    } else {
      form.userName = ''
      form.userPw = ''
      form.userRole = ''
      user.value = undefined
      title.value = '添加用户'
    }
  })

  const password = computed(() => md5(form.userPw))

  const formRef = ref<typeof Form>()

  const init = () => {
    if (!roles.value.length) {
      getRoles()
    }
  }

  const submit = async (done: (closed: boolean) => void) => {
    modalProps.loading = true
    const err = await formRef.value?.validate()
    console.log('err', err)
    if (err) return (modalProps.loading = false)
    if (user.value?.id) {
      const { code, message } = await post({
        url: USER_UPDATE,
        data: {
          ...form,
          id: user.value.id,
          userPw: password.value,
        },
      })
      modalProps.loading = false
      if (code === ResponseCode.SUCCESS) {
        Message.success(message)
        emits('doRefresh')
        return done(true)
      }
    } else {
      const { code, message } = await post({
        url: CREATE_USER,
        data: {
          ...form,
          userPw: password.value,
        },
      })
      modalProps.loading = false
      if (code === ResponseCode.SUCCESS) {
        Message.success(message)
        emits('doRefresh')
        return done(true)
      }
    }
  }

  onMounted(init)
</script>
